<template>
  <!-- <el-card style="margin-bottom: 10px"> -->
  <!-- <h6 style="text-align: left">柴油机</h6> -->
  <!-- <div class="box" style="display: flex; flex-wrap: wrap; flex-direction: column">
			<div>echart</div>
			<div> -->
  <!-- <CardData type="液位" :data="10" unit="/℃"></CardData>
				<CardData type="温度" :data="10" unit="/℃"></CardData>
				<CardData type="压力" :data="10" unit="/℃"></CardData>
				<CardData type="吨位" :data="10" unit="/℃"></CardData> -->
  <!-- </div>
		</div>
	</el-card> -->
  <div
    class="cargo-oil-tanks"
    :style="{ ...customStyle, top: top + 'px', left: left + 'px' }"
  >
    <HistogramPer :value="props.value"></HistogramPer>
    <div
      style="
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 63px;
      "
    >
      <!-- 液压高度 -->
      <div>{{ isEmptyToCharacter(h) }}m</div>
      <!-- 吨数 -->
      <div>{{ isEmptyToCharacter(t) }}m³</div>
      <!-- 压力 -->
      <div>{{ isEmptyToCharacter(b) }}mbar</div>
      <!-- 温度 -->
      <div>{{ isEmptyToCharacter(w) }}℃</div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, inject, reactive } from "vue";
// 组件
import HistogramPer from "@/echarts/HistogramPer.vue";
import { isEmptyToCharacter} from "@/plugins/index.js";
let props = defineProps({
  customStyle: {
    type: String,
    default: () => {
      return {};
    },
  },
  t: {
    type: Number,
    default: 0,
  },
  h: {
    type: Number,
    default: 0,
  },
  b: {
    type: Number,
    default: 0,
  },
  w: {
    type: Number,
    default: 0,
  },
  top: {
    type: Number,
    default: 0,
  },
  left: {
    type: Number,
    default: 0,
  },
  value: {
    type: Number,
    default: 0,
  },
});
</script>

<style lang="scss" scoped>
.cargo-oil-tanks {
  position: absolute;
  display: flex;
  color: #fff;
  font-size: 12px;
}
</style>
